Como ficou definido no documento 2, os elementos html podem ser divididos nas seguintes classes :
Classes dos elementos HTML:
1-ELEMENTOS BÁSICOS: <body>
2-ELEMENTOS DE METADADOS: <base><head><link><meta><style>
3-ELEMENTOS DE SEÇÕES DE CONTEÚDO: <address><article><aside> <footer>
<header><h1> a <h6><hgroup><nav>
4-ELEMENTOS DE CONTEÚDOS EM TEXTO: <dd><dl><dt><div><figure>
<figcaption><hr><li><main><ol><p><pre><ul>
5-ELEMENTOS DE TEXTO EM LINHA: <a><abbr><b><br><cite><code>
<data><dfn><em><i><kbd><mark><q><s><samp>
<small><span><strong><sub><sup><time><u><var>
6-ELEMENTOS DE IMAGEM E MULTIMÍDIA: <img><area><audio><map><track><video>
7-ELEMENTOS DE CONTEÚDOS EMBARCADOS :<embed><object><param><source>
8-ELEMENTOS DE SCRIPT: <canvas><noscript><script>
9-ELEMENTOS DE MARCAÇÃO DE EDIÇÃO: <del> <ins>
10-ELEMENTOS DE CONTEÚDOS EM TABELA: <caption><col><colgroup><table>
<tbody><td><tfoot><th><thead><tr>
11-ELEMENTOS DE FORMULÁRIO: <button><datalist><fieldset><form><input>
<label><legend><meter><optgroup><option><output><progress>
<select><textarea>
12-ELEMENTOS INTERATIVOS: <details><menu><menuitem><summary>
Neste documento discutiremos a classe 8-ELEMENTOS DE SCRIPT.
<canvas>
O elemento <canvas> é usado para desenhar gráficos em tempo real via JavaScript. É apenas um contêiner
para gráficos. Você deve usar o JavaScript para desenhar os gráficos. O Canvas possui vários métodos para
desenhar caminhos, caixas, círculos, texto e adicionar imagens.
Nota : Adicionar o código:
<canvas id="canvas" width="800" height="100">
Seu browser não suporta o elemento canvas do HTML5
</canvas>
Se o parágrafo abaixo for exibido o browser não aceita o canvas do html5 :
O elemento script esta ligado ao JavaScript que é um dos itens do menu deste site e analisado separadamente.
A tag <script> é usada para definir um script do lado do cliente (JavaScript).
Este elemento contém instruções de script ou aponta para um arquivo de script externo através do
atributo src.
Os usos comuns para JavaScript são manipulação de imagem, validação de formulário e alterações dinâmicas de
conteúdo.
Para selecionar um elemento HTML, o JavaScript costuma usar o método document.getElementById ().
Neste exemplo abaixo de JavaScript ele muda o valor da caixa de texto vazia para
"Olá Mundo!" em um elemento HTML com id = "demo" ao pressionar o botão abaixo :
Aqui será exibido a mensagem após pressionar o botão :
O script utilizado foi:
<script>
function exibe() {
document.getElementById("demo").value = "Olá Mundo!";
}
</script>
O botão tem o seguinte código :
<input type="button" value="Clique me" onclick="exibe();" />
E a caixa de texto que recebeu a mensagem tem o seguinte código :
<input type="text" id="demo" value="" />
Portanto, a sequencia de operação foi :
1-O botão ao ser pressionado disparou o evento.
2-O Eventos disparou uma função JavaScript.
3-A função JavaScript aterou o valor de um parametro de um elemento dom DOM ( id=demo ).
Isto é um padrão que os desenvolvedores HTML e JavaScript bolaram.
Nos browser muito antigos eles não suportavam javascript e por isso foi feito um teste se o browser
podia ou não executar o script. O teste era o seguinte :
Codificação do teste :
<noscript>Seu browser não suporta JavaScript!</noscript>
Como o browser exibe ( Se exibir a mensagem é porque não suporta JavaScript) :
Importante : JavaScript sempre foi uma ferramenta que 'correu por fora' auxiliando os browsers a
fazerem tarefas que eles ( browsers ) não conseguiriam sózinhos.
No entanto a linguagem tem ganhado fortes recursos que tornaram ela indispensável para qualquer
programador WEB. Só para dar uma idéia ela hoje já roda até no server side.
Outros frameworks(frameworks significa modelos mas em portugues a melhor tradução seria ferramentas )
como o bootstrap, node js, vue js entre muitas outras tem ganhado o apreço dos programadores pelos
recursos que contém contra o tamanho extremamente reduzido do anexo que incorpora os scripts.
As desvantagens dos scripts são :
1-Muitos erros de programação passam porque os ambientes de desenvolvimento não conseguem validar o
código javasript e isto normalmente é feito no browser mas a perda de tempos muitas vezes é considerável.
É como antigamente, você editava num ambiente, compilava em outro, depurava em outro.
Note que um simples fechar de aspas ou apóstrofo pode fazer uma pessoa perder tempo a procura do erro e
este erro passar despercebido na leitura normal do código.
2-Em relação a produtividade os script não são muito produtivos se comparados aos packages de um visual
studio ou outros frameworks que facilitam o desenvolvimento de apps.
Eu mesmo já ví um excelente analista perder um dia inteiro para fechar uma aplicação de carrinho
de compras onde a única variação possível era a quantidade de produtos que podia ser alterada.
3-Algumas funcionalidades são traiçoeiras tipo a procura de parentes ou filhos. Se você usar este recurso
sempre que alterar o leioute da página vai ter que revisar todo o código javascript de navegação.
4-A integração com o server side em muitos casos ainda é precária.
Cito o exemplo : Um servidor envia uma página para o cliente.
O javascript através do Ajax busca e complementa as informações da página posteriormente.
Note que neste momento o que o Ajax fez o servidor nem tomou nota, ou seja, para o servidor a página
continua exatamente como foi enviada originalmente ( client state ).
Ao enviar informações para o servidor se alguma das informações recebidas pelo Ajax tiver que ser enviada
ao servidor as únicas maneiras de fazer isso é colocar os dados recebidos do Ajax em elementos que vão
para o servidor no submit do form. A outra é através de javascript. Ambos os métodos demandam tempo na
programação para unir ou separar as informações e isso também é um custo para o servidor.